<template>
  <div class="g-panel-fixed" v-if="value">
    <div class="mask" @click.stop="onCancel"></div>
    <div class="m-panel-wrap" :style="{width: width, height: height, 'border-radius': `${radius}px`}">
      <!-- 标题 -->
      <w-panel-title class="clearfix">
        <h3 class="fl">{{title}}</h3>
        <slot name="title"></slot> 
      </w-panel-title>
      <!-- 内容区域 -->
      <div class="panel-scroll">
        <!-- 内容 -->
        <w-panel>
          <slot></slot>
        </w-panel>
      </div>
      <!-- 确认和取消按钮 -->
      <w-button-group>
        <w-button type="default" @on-click="onCancel">关闭</w-button>
        <w-button type="main" v-if="!showClose" @on-click="onConfirm">{{confirmText}}</w-button>
      </w-button-group>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      // 控制显示
      value: [Boolean],
      // 标题文字
      title: {
        type: String,
        default: ''
      },
      // 宽度
      width: {
        type: String,
        default: '580px'
      },
      // 高度
      height: {
        type: String,
        default: '340px'
      },
      // 圆角大小
      radius: {
        type: [String, Number],
        default: 5
      },
      // 确认按钮文字
      confirmText: {
        type: String,
        default: '确认'
      },
      showClose: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    methods: {
      onCancel() {
        this.$emit('on-cancel')
        this.$emit('input', false)
      },
      onConfirm() {
        this.$emit('on-confirm')
      }
    }
  }
</script>

// <style lang="scss">
// .g-panel-fixed {
//   .w-input,.select-container {
//     display: initial;
//   }
// }
// </style>

<style lang="scss" scoped>
  @import '../../scss/_panel.scss';
</style>